<template>
  <div class="container">
    <div class="top">
      <img :src="detail.avatar" alt="" />
      <h3>{{ detail.nickname }}</h3>
      <h4>{{ detail.money }}</h4>
    </div>
    <h4 class="title">帮助我的人 {{ detail.total }}</h4>
    <div class="wrap" v-if="list.length>0">
        <div class="item" v-for="(item, ind) in list" :key="ind">
            <div class="item-top">
                <img :src="item.avatar" alt="" class="avatar" />
                {{ item.nickname }}
            </div>
            <p>
                已帮助您<span class="money">{{ item.money }}元</span>
                <span class="date">发起于：{{ item.created_at }}</span>
            </p>
        </div>
    </div>
    <div class="nodata" v-else>
        暂时无人帮助您，快去邀请吧
    </div>
    <!-- 个人分享页面 -->
    <div class="mask" v-if="showShare" @click="showShare = false">
      <div class="mask-content">
        <div class="contents">
          <h1>个人专属分享</h1>
          <p>您的专属分享已经生成了，请选择“···”右上角的去体验吧!</p>
          <div class="btn" @click.slef="showShare =false">我知道了</div>
        </div>
      </div>
    </div>
    <div class="share-btn">去邀请</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      detail: "",
      list: [],
      showShare:false,
      id: "",
    };
  },
  mounted() {
    this.id = this.$route.query.id;
    console.log(2);
    this.getData();
  },
  methods: {
    getData() {
      this.$api
        .getList({
          p: "w",
          api_token: localStorage.api_token,
          id:this.id
        })
        .then((res) => {
          this.detail = res.data;
          this.list = res.data.list;
        });
    },
  },
};
</script>

<style scoped>
.container {
  width: 100%;
  min-height: 100vh;
  background:#f5f5f5;
}
.top{
    height:240px;
    overflow: hidden;
    background: #fff;
}
.top img{
    width:100px;
    height:auto;
    display: block;
    margin:20px auto 5px;
    border-radius: 50%;
    overflow: hidden;
}
.top h3{
    color:#000;
    text-align: center;
    font-size:16px;
    margin-bottom:5px;
}
.top h4{
    font-size:18px;
    color:#333;
    text-align: center;
}
.item {
  background: #fff;
  padding: 10px 10px;
  margin-bottom: 10px;
}
.item-top {
  color: #000;
  font-size: 16px;
  vertical-align: middle;
  position: relative;
  display: flex;
}
.btn-group {
  flex: 1;
  text-align: right;
}
.btn {
  border-radius: 14px;
  padding: 5px 15px;
  text-align: center;
  font-size: 14px;
  color: #fff;
  display: inline-block;
  background: #cc1c24;
}
.avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 15px;
}
.item p,
.item .p {
  color: #333;
  font-size: 14px;
  overflow: hidden;
}
.item .date {
  display: block;
  float: right;
}
.money {
  color: #cc1c24;
}
.inners {
  background: #fff;
  padding: 10px 15px;
}
.inners p {
  color: #666;
  font-size: 14px;
  margin: 0;
  line-height: 20pxs;
}
.share-btn {
  height: 60px;
  line-height: 60px;
  text-align: center;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  font-size: 18px;
  color: #ffffff;
  background: #cc1c24;
}
.title{
    height:50px;
    line-height: 50px;
    text-align:left;
    font-size:14px;
    padding:0 15px;
    color:#333;
    background: #fff;
    border-left:#cc1c24 4px solid ;
    margin:10px 0 0;
}
.nodata{
    padding:10px;
}
.contents {
  padding: 0 20px;
  overflow: hidden;
}
.contents h1 {
  font-size: 16px;
  text-align: center;
}
.btns {
  width: 140px;
  text-align: center;
  height: 35px;
  line-height: 35px;
  border-radius: 4px;
  background: #cc1c24;
  color: #fff;
  margin: 5px auto 20px;
}
</style>